@import "../../base/base-var.less";

footer {
  margin-top: @gap-normal-pc;

  background: #332f2c;
  color: @color-subtitle;
  border-top: solid 3px @color-main;
  @media screen and (max-width: 540px) {
    text-align: center;
  }
  @media screen and (min-width: 540px) {
    min-width: 1000px;
  }

  &>div {
    box-sizing: border-box;
    @media screen and (max-width: 540px) {
      padding: @gap-normal-m;
    }
    @media screen and (min-width: 540px) {
      padding: @gap-normal-pc 0;
      max-width: 1200px;
      min-width: 1000px;
      margin: 0 auto;
    }
  }

  .footer-note {
    @media screen and (min-width: 540px) {
      float: left;
      width: 60%;
    }
    .four {
      margin-bottom: @gap-normal-pc;
      font-size: @font-size-smaller;
      a {
        color: white;
        margin-bottom: @gap-normal-pc;
        &:hover {
          color: @color-main;
        }
      }
    }

    p {
      font-size: @font-size-smallest;
      line-height: 1.5;
      a {
        color: @color-subtitle;
        &:hover {
          color: @color-main;
        }
      }
    }
  }

  .footer-user {
    @media screen and (max-width: 540px) {
      margin-top: @gap-normal-m;
      text-align: center;
    }
    @media screen and (min-width: 540px) {
      float: right;
    }

    .text {
      @media screen and (max-width: 540px) {
        display: inline-block;
      }
      div:nth-child(1) {
        float: left;

        p:nth-child(1) {
          font-size: @font-size-smaller;
          color: white;
          margin-bottom: @gap-small-pc;
        }
        p:nth-child(n + 2) {
          font-size: @font-size-smallest;
          height: 20px;
          line-height: 20px;
          img {
            vertical-align: text-bottom;
            margin-right: @gap-small-pc;
          }
        }
      }
      div:nth-child(2) {
        float: left;
        margin-left: @gap-normal-pc;
        height: 100px;
        width: 100px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    & > p {
      margin-top: @gap-small-pc;
      font-size: @font-size-smallest;
      span {
        color: @color-main;
      }
    }
  }
}
